<template>
  <div class="register">
    <form
      action="#"
      class="form-wrapper"
    >
      <div class="logo"><img
          src="~assets/img/logo.svg"
          alt=""
        > Su chamber</div>
      <div class="form-item">
        <label for="username">username:</label>
        <input
          type="text"
          id="usernmae"
          name="username"
          autocomplete="off"
          v-model="username"
        >
      </div>
      <div class="form-item">
        <label for="userpassword">password:</label>
        <input
          type="password"
          id="userpassword"
          name="password"
          autocomplete="off"
          v-model="password"
        >
      </div>
      <div class="form-item">
        <label for="confirmPwd">confirm password:</label>
        <input
          type="password"
          id="confirmPwd"
          name="confirmPwd"
          autocomplete="off"
          v-model="confirmPassword"
        >
      </div>
      <div class="form-item">
        <label for="email">email:</label>
        <input
          type="email"
          id="email"
          name="email"
          autocomplete="off"
          v-model="email"
        >
      </div>
      <div class="form-item">
        <label for="checkCode">Verification code:</label>
        <div class="check">
          <input
            type="text"
            id="checkCode"
            name="checkCode"
            autocomplete="off"
            v-model="checkCode"
          >
          <button @click.prevent="sendCheckCode">{{sendBtn}}</button>
        </div>
      </div>
      <div class="form-item">
        <input
          type="submit"
          id="smt"
          value="Sign up"
          @mousedown="changeBtnColor"
          @mouseup="hfBtnColor"
          :class="{mousedownClick:isBtnClick}"
          @click.prevent="submitForm"
        >
      </div>
      <p class="tips">已有账号?点击 <router-link to="/login">登录</router-link>
      </p>
    </form>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      username: "",
      password: "",
      confirmPassword: "",
      email: "",
      isBtnClick: false,
      sendBtn: "发送验证码",
      canSend: true,
      checkCode: "",
      serverCode: "",
    };
  },
  methods: {
    // 发送验证码
    sendCheckCode() {
      if (this.canSend && this.email.trim() != "") {
        // 点击后不能再次点击发送
        this.canSend = false;

        // 定义倒计时
        let time = 60;
        let setInter = setInterval(() => {
          timeP.call(this);
          // 倒计时完成清除定时器
          if (time < 0) {
            this.canSend = true;
            this.sendBtn = "重新发送";
            clearInterval(setInter);
          }
        }, 1000);

        timeP.call(this);

        function timeP() {
          this.sendBtn = time-- + "s";
        }
        let date = new Date();
        this.$http
          .sendCheckCode({
            startTime: date.getHours() + ":" + date.getMinutes(),
            email: this.email,
          })
          .then((res) => {
            this.serverCode = res.data.checkCode;
          })
          .catch(err => {
            ElMessage({
              message: err,
              type: "error",
            });
          })
      } else {
        ElMessage({
          message: "请填写邮箱",
          type: "error",
        });
        return;
      }
    },
    // 提交按钮按下修改背景色
    changeBtnColor() {
      this.isBtnClick = true;
    },
    // 提交按钮弹起恢复背景色
    hfBtnColor() {
      this.isBtnClick = false;
    },
    // 提交表单
    submitForm() {
      function check(re, el) {
        return re.test(el);
      }
      let usernameRe = /^\w{8,15}$/;
      let passwordRe = /^\w{6,16}$/;
      let emailRe = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
      if (
        check(usernameRe, this.username) &&
        check(passwordRe, this.password) &&
        check(emailRe, this.email) &&
        this.password === this.confirmPassword
      ) {
        if (this.checkCode != this.serverCode) {
          ElMessage({
            message: "验证码错误",
            type: "error",
          });
          return;
        }
        this.$http
          .register({
            username: this.username,
            password: this.password,
            emailL: this.email,
          })
          .then((res) => {
            if (res.data.success) {
              // 注册成功
              ElMessage({
                message: res.data.message,
                type: "success",
              });
              this.$router.push("/login");
            } else {
              // 注册失败
              ElMessage({
                message: res.data.message,
                type: "error",
              });
              return;
            }
          })
          .catch(err => {
            ElMessage({
              message: err,
              type: "error",
            });
          })
      } else {
        ElMessage({
          message: "请填写完整",
          type: "error",
        });
      }
    },
  },
};
</script>

<style scoped>
.mousedownClick {
  background-color: #6f43fe9a !important;
}
@media screen and (max-width: 768px) {
  #app .register {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background-color: transparent;
  }
  #app .register::before,
  #app .register::after {
    content: none;
  }
}
@media screen and (max-width: 425px) {
  .register .form-wrapper {
    width: 90%;
    box-shadow: none;
  }
}
.register::before,
.register::after {
  content: "";
  position: absolute;
  bottom: 10px;
  /* width: 30%; */
  width: 500px;
  height: 400px;
  background-repeat: no-repeat;
  background-position: center;
}
.register::before {
  left: 0;
  background-image: url("~assets/img/wrapleft.svg");
}
.register::after {
  right: 0;
  background-image: url("~assets/img/wrapright.svg");
}
.register {
  position: relative;
  display: flex;
  /* width: 1200px; */
  height: 600px;
  margin: 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* box-shadow: 0 0 15px var(--shadowColor); */
  border-radius: var(--radius);
  background-color: #fff;
}
.logo {
  padding: 25px 0;
  font-size: 30px;
  color: #7043fe;
}
.logo img {
  vertical-align: middle;
  transform: rotate(60deg);
}
.form-item label,
input {
  display: block;
  width: 200px;
  margin: 10px auto;
  text-align: left;
  border: none;
  font-size: 16px;
  color: #555;
}
label {
  color: #666;
}
.form-item input[type="text"],
input[type="password"],
input[type="email"] {
  height: 30px;
  background-color: #f0ecfd;
  padding-left: 10px;
  border-radius: 10px;
}
.form-wrapper {
  position: relative;
  z-index: 1;
  text-align: center;
  box-shadow: 0 0 15px var(--shadowColor);
  width: 400px;
  border-radius: 10px;
  background-color: #fff;
  padding-bottom: 25px;
}
#smt {
  padding: 10px 0;
  text-align: center;
  background-color: #7043fe;
  font-size: 16px;
  color: #fff;
  border: none;
  margin-top: 20px;
  border-radius: 15px;
  cursor: pointer;
}
.mousedownClick {
  background-color: #6f43fe9a !important;
}
p {
  width: 200px;
  text-align: left;
  margin: 0 auto;
  color: #666;
}
p label {
  user-select: none;
}
input[type="checkbox"] {
  display: inline;
  width: auto;
  vertical-align: middle;
  text-align: left;
  zoom: 1.2;
  margin: 0 5px;
}
.tips {
  margin-top: 15px;
  font-size: 14px;
}
.tips a {
  color: blue;
}
.check {
  display: flex;
  justify-content: center;
}
.check input {
  width: 110px;
  margin: 0;
  margin-right: 10px;
}
.check button {
  width: 79px;
  background: none;
  outline: none;
  border: 1px solid #ccc;
  border-radius: var(--radius);
  cursor: pointer;
}
</style>